<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D翻转卡片</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }

        .main-body {
            padding: 30px;
            width: 60%;
            height: 60%;
            min-width: 490px;
            min-height: 260px;
            border-radius: 20px;
            background-color: #5c5c5c48;
            backdrop-filter: blur(1px);
            box-shadow: 4px 4px 14px 0px rgba(0,0,0,0.75);
            display: grid;
            grid-template-rows: 1;
            grid-template-columns: repeat(3,1fr);
            gap: 20px;
        }

        .smallBox {
            padding: 3px;
            width: 100%;
            height: 100%;
            min-width: 130px;
            min-height: 200px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
            perspective: 1000px;
            transition: all .7s;
        } 

        .smallBox::before {
            content: '';
            width: 350px;
            height: 500px;
            background-image: conic-gradient(transparent, transparent, transparent, #42c7fc);
            animation: rotate 4s linear infinite;
            position: absolute;
            z-index: -1;
        }

        @keyframes rotate {
            to {
                transform: rotate(360deg);
            }
        }
        
        .smallBox01 {
            padding: 20px 0;
            width: 97%;
            height: 98%;
            background-color: #979797;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            position: absolute;
            backface-visibility: hidden;
            transition: transform 0.7s ease;
        }

        .frontBox {
            z-index: 1;
        }

        .backBox {
            transform: rotateY(180deg);
            background-color: #666;
        }
        
        .smallBox:hover .frontBox {
            transform: rotateY(180deg);
        }
        .smallBox:hover .backBox {
            transform: rotateY(0);
        }

        .hoverBox {
            padding: 5px;
            width: 60px;
            height: 60px;
            border: 2px solid rgb(234, 234, 234);
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 2px 2px 47px -5px rgba(0,0,0,1);
        }

        .hoverBox > img {
            width: 150%;
            height: 150%;
            object-fit: cover;
            object-position: center;
        }

        .imgBottomBox {
            width: 80%;
            height: 35%;
            border-radius: 10px;
            background-color: #f0ffff;
            box-shadow: 2px 2px 15px 0px rgba(0,0,0,1);
            font-size: 16px;
            letter-spacing: 1px;
            color: #222222;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .backBox .imgBottomBox {
            background-color: #fff;
            color: #42c7fc;
            font-weight: bold;
        }
    </style>

</head>
<body>
    <div class="main-body">
        <div class="smallBox">
            <div class="smallBox01 frontBox">
                <div class="hoverBox">
                    <img src="./img1/1.png" alt="meinv01">
                </div>
                <div class="imgBottomBox">关于我</div>
            </div>
            <div class="smallBox01 backBox">
                <div class="hoverBox">
                    <img src="./img1/1.png" alt="背面1">
                </div>
                <div class="imgBottomBox">个人简介<br>热爱生活</div>
            </div>
        </div>

        <div class="smallBox">
            <div class="smallBox01 frontBox">
                <div class="hoverBox">
                    <img src="./img1/2.png" alt="meinv02">
                </div>
                <div class="imgBottomBox">我的作品</div>
            </div>
            <div class="smallBox01 backBox">
                <div class="hoverBox">
                    <img src="./img1/2.png" alt="背面2">
                </div>
                <div class="imgBottomBox">设计案例<br>持续更新</div>
            </div>
        </div>

        <div class="smallBox">
            <div class="smallBox01 frontBox">
                <div class="hoverBox">
                    <img src="./img1/3.png" alt="meinv03">
                </div>
                <div class="imgBottomBox">联系我</div>
            </div>
            <div class="smallBox01 backBox">
                <div class="hoverBox">
                    <img src="./img1/3.png" alt="背面3">
                </div>
                <div class="imgBottomBox">欢迎交流<br>共同进步</div>
            </div>
        </div>
    </div>
</body>
</html>